<template>
    <div class="user-div">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div>
                    <el-form ref="form" :model="form" label-width="100px" :inline="true">
                        <el-form-item label="账号">
                            <el-input placeholder="按账号搜索" suffix-icon="el-icon-search" v-model="form.username">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input placeholder="按姓名搜索" suffix-icon="el-icon-search" v-model="form.name">
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <el-form ref="form" :model="form" label-width="100px" :inline="true">
                        <el-form-item label="空闲状态">
                            <el-select v-model="form.isFree" placeholder="请选择空闲状态">
                                <el-option label="空闲" value="1"></el-option>
                                <el-option label="正在工作" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="职位">
                            <el-select v-model="form.jobId" placeholder="请选择职位">
                                <el-option v-for="item in jobList" :key="item.name" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div>
                    <el-button type="primary" @click="init(currentPag)">搜索</el-button>
                    <el-button type="info" @click="refresh">重置</el-button>
                    <el-button type="danger" @click="">删除</el-button>
                </div>
            </div>
            <div class="text item">
                <el-table :data="doctorList" border style="width: 100%;" ref="multipleTable"
                    @selection-change="handleSelectionChange" v-loading="loading">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="id" label="ID" width="200">
                    </el-table-column>
                    <el-table-column prop="username" label="账号" width="100">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="100">
                    </el-table-column>
                    <el-table-column prop="jobName" label="职位" width="100">
                    </el-table-column>
                    <el-table-column prop="avatar" label="头像" width="80">
                        <template slot-scope="scope">
                            <el-avatar :size="50" :src="scope.row.avatar"></el-avatar>
                        </template>
                    </el-table-column>
                    <el-table-column prop="introduce" label="简介" width="300">
                    </el-table-column>
                    <el-table-column prop="sex" label="空闲状态" width="80">
                        <template slot-scope="scope">
                            <span v-show="scope.row.isFree == 1">空闲</span>
                            <span v-show="scope.row.isFree == 2">正在工作</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="80">
                        <template slot-scope="scope">
                            <el-tag type="success" v-show="scope.row.status == 1">正常</el-tag>
                            <el-tag type="danger" v-show="scope.row.status == 0">禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="80">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" v-show="scope.row.status == 0"
                                @click="returnDoctor(scope.row.id)">恢复</el-button>
                            <el-button type="text" size="small" v-show="scope.row.status == 1"
                                @click="deleteDoctor(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="totalPage" :page-size="pageSize"
                    @current-change="currentChange">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'DoctorList',
    data() {
        return {
            // 是否加载
            loading: false,
            // 搜索内容
            searchContent: "",
            // 多选数据
            multipleSelection: [],
            // 当前页数
            currentPag: 1,
            // 每页大小
            pageSize: 10,
            // 总页数
            totalPage: 0,
            // 表单数据
            form: {
                jobId: null,
                isFree: null,
                username: null,
                name: null
            }
        }
    },
    mounted() {
        this.init(this.currentPag)
        this.getJobList()
    },
    methods: {
        // 获取表格数据
        async init(page) {
            this.loading = true
            let res = await this.$store.dispatch('getHospitalDoctorList', {
                currentPag: page,
                pageSize: this.pageSize,
                isFree: this.form.isFree,
                jobId: this.form.jobId,
                username: this.form.username,
                name: this.form.name
            })
            if (!res.success) this.$myfun.resError(res)
            this.loading = false
        },
        // 多选
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        // 获取职位列表
        async getJobList() {
            let res = await this.$store.dispatch("getJobList")
            if (!res.success) this.$myfun.resError(res)
        },
        // 更换页数
        currentChange(pag) {
            this.init(pag)
        },
        // 重置
        refresh() {
            let newObj = {}
            this.form = newObj
        },
        // 删除医生
        deleteDoctor(id) {
            this.$confirm('此操作将删除医生, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await this.$store.dispatch("deleteDoctor", id)
                if (!res.success) this.$myfun.resError(res)
                else {
                    this.$message.success(res.message)
                    this.init(this.currentPag)
                }
            }).catch((res) => {
                this.$myfun.resError(res)
            });
        },
        // 恢复
        async returnDoctor(id) {
            let res = await this.$store.dispatch("returnDoctor", id)
            if (!res.success) this.$myfun.resError(res)
            else {
                this.$message.success(res.message)
                this.init(this.currentPag)
            }
        }
    },
    computed: {
        doctorList() {
            return this.$store.state.hospital.doctorList
        },
        jobList() {
            return this.$store.state.job.jobList
        },
    }
}
</script>

<style scoped>
.clearfix {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination {
    padding: 20px 0 10px 0;
    text-align: center;
}
</style>